<template>
  <div>
    <ul>
      <li v-for="item in datalist" :key="item.id"></li>
    </ul>
    <input type="button" value="防抖" @click="add" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      datalist: [],
      timer: null,
      startTime: ""
    };
  },

  components: {},

  methods: {
    add() {
      //防抖方案一
      //   this.startTime = new Date();
      //   if (new Date() - this.startTime > 1000) {
      //     this.$store.dispatch("addItem", { id: 1 });
      //     this.startTime = new Date();
      //   }

      //方案二
      clearTimeout(timer);
      this.timer = setTimeout(function() {
        this.$store.dispatch("addItem", { id: 1 });
      }, 1000);
    }
  },

  created() {
    //进入页面就请求数据
    this.$store.dispatch("getData", { page: 1, pagesize: 10 });
    this.datalist = this.$store.state.cart.datalist;
  }
};
</script>

<style scoped>
</style>